import React from 'react'
export class Main extends React.Component {
  state = {
    all: this.props.list.length > 0 && this.props.list.every(item => item.flag)
  }
  render() {
    const { list, itemRemove, radioCheck, type } = this.props
    let newList
    if (type === 'all') {
      newList = list
    } else if (type === 'active') {
      newList = list.filter(item => !item.flag)
    } else if (type === 'completed') {
      newList = list.filter(item => item.flag)
    }
    return (
      <>
        <section className='main'>
          <input className='toggle-all' checked={this.state.all} onChange={this.checkedFn} type='checkbox' id="toggle-all" />
          <label htmlFor='toggle-all'>Mark all as complete</label>
          <ul className='todo-list'>
            {
              newList.map(item => (
                <li key={item.id} className={item.flag ? 'completed' : ''}>
                  <div className='view'>
                    <input checked={item.flag} onChange={() => radioCheck(item.id)} className='toggle' type='checkbox' />
                    <label>{item.content}</label>
                    <button onClick={() => itemRemove(item.id)} className='destroy'></button>
                  </div>
                  <input className='edit' />
                </li>))
            }
          </ul>
        </section>
      </>
    )
  }
  checkedFn = (e) => {
    this.setState({
      all: e.target.checked
    })
    this.props.allCheck(!this.state.all)
  }
}